<template>
    <view>
        <view class="flex f14 cf j-t btm"
              style="background:rgb(241,158,194);text-align: center; line-height:120rpx;height: 120rpx;z-index:999">
            <view @click="all('./edit?item='+item)" class="w33">
                编辑
            </view>
            <view @click="all('serve')" class="w33">
                保存
            </view>
            <!--<view @click="all('fx')" class="w33">
                分享
            </view>-->
            <button open-type="share" class="w33 btn">分享</button>
        </view>

        <canvas :style="{'width':width+'px','height':height+'px'}" canvas-id="canvas"></canvas>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                height: 0,
                width: 0,
                item: {}
            }
        },
        onReady() {

        },
        onLoad(e) {
            this.canvas(JSON.parse(e.item))
            this.item = e.item
        },
        onShareAppMessage(res) {
            if (res.from === 'button') {
                // 来自页面内分享按钮
            }
            return {
                title: '我们的纪念日',
                path: 'pages/jinianri/jinianri'
            };
        },
        methods: {
            canvas(es) {
                let self = this;

                uni.getSystemInfo({
                    success: (e) => {
                        console.log(e);
                        self.width = e.windowWidth
                        self.height = e.windowHeight-62;

                        var ctx = uni.createCanvasContext('canvas', this)
                        self.ctx = ctx;

                        uni.getImageInfo({
                            src: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/rijibg.jpg',
                            success: function (image) {
                                self.ctx.drawImage(image.path, 0, 0, self.width, self.height)
                                // self.ctx.drawImage('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/rijibg.jpg',0,0,self.width,self.height)

                                self.ctx.setFillStyle('#ffffff')
                                // self.ctx.setFillStyle('#F0C8C8')
                                self.ctx.setFontSize(20)
                                self.ctx.textAlign = 'center'
                                self.ctx.fillText(es.name, self.width / 3, 200);
                                self.ctx.setFontSize(40)
                                self.ctx.fillText(es.diff_day, self.width / 3, 280);
                                self.ctx.setFontSize(14)
                                self.ctx.fillText('天', self.width / 3 + 90, 270);
                                self.ctx.setFontSize(14)
                                self.ctx.fillText('开始日期:' + es.date, self.width / 3, 330);
                                self.ctx.draw(true)
                            }
                        });


                    }
                })
                // git config --global user.email "you@example.com"
                // git config --global user.name "Your Name"


            },
            all(e) {
                if (e == 'serve') {
                    return this.serve()
                }
                if (e == 'fx') {
                    return this.serve(e)
                }
                uni.navigateTo({
                    url: e
                })
            },
            serve(e) {
                //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
                uni.showLoading({
                    title: '处理中'
                });
                uni.canvasToTempFilePath({
                    canvasId: 'canvas',
                    quality: 1,
                    complete: (res) => {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res) {
                                uni.hideLoading();
                                uni.showToast({
                                    title: '已保存到相册',
                                    icon: 'success',
                                    duration: 2000
                                })
                                if (e == 'fx') {
                                    plus.runtime.openURL("weixin://");
                                }
                            }
                        })
                    }
                }, this);

            }
        }
    }
</script>

<style>
    .btm {
        position: fixed;
        z-index: 1;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .btn{
        color: #fff;
        border-color: rgb(241,158,194);
        background-color: rgb(241,158,194);
        line-height: 60px;
        font-size: 14px;
    }
    button::after{
        border: 0;
    }
</style>
